<template>
	<view class="form-item extra-icon">
		<view class="form-item__name">
			{{ name }}
			<text class="form-item__name-subname" v-if="subname">({{ subname }})</text>
		</view>
		<view class="form-item__value">
			<picker v-if="range" :value="index" :range="range" :range-key="rangeKey" @change="change"> <text class="form-item__value-input form-item__value-picker-input">{{ text }}</text></picker>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		name: String,
		subname: String,
		value: null,
		placeholder: String,
		range: Array,
		rangeKey: {
			type: String,
			default() {
				return 'label';
			}
		},
		rangeValue: {
			type: String,
			default() {
				return 'value';
			}
		}
	},
	computed: {
		index() {
			return this.range.findIndex(item => item[this.rangeValue] == this.value);
		},
		text() {
			if (this.index < 0) return this.placeholder;
			else return this.range[this.index][this.rangeKey];
		}
	},
	methods: {
		change(e) {
			let value = this.range[e.target.value < 0 ? 0 : e.target.value][this.rangeValue];
			this.$emit('input', value);
			// this.$emit('update:value', value);
			this.$emit('change',value);
		}
	}
};
</script>

<style></style>
